<template lang="pug">
.ui.input
  input.flatpickr(
    v-el:date,
    type="text",
  )
</template>

<script>
import flatpickr from 'flatpickr'
import 'flatpickr/dist/flatpickr.min.css'

flatpickr.l10n.weekdays.shorthand = flatpickr.l10n.weekdays.longhand = ['日', '一', '二', '三', '四', '五', '六']
flatpickr.l10n.months.shorthand = flatpickr.l10n.months.longhand = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

export default {
  name: 'date',
  props: ['unix'],
  data () {
    return {
    }
  },
  methods: {
    load () {
      this.$els.date.flatpickr({
        allowInput: true,
        enableTime: true,
        time_24hr: true,
        minuteIncrement: 0,
        onChange: (dateObj, dateStr, instance) => {
          this.unix = moment(dateObj).unix()
        },
        onOpen: (dateObj, dateStr, instance) => {
          if (!this.unix) {
            instance.jumpToDate(moment().set({minute:0, second:0, millisecond:0}).toDate())
          }
        },
        defaultDate: moment.unix(this.unix).set({minute:0, second:0, millisecond:0}).toDate(),
      })
    },
  },
  ready () {
    this.load()
  },
  watch: {
    unix: {
      handler (val, old) {
        this.load()
      },
      deep: true,
      // immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
